<template>
  <div>
      {{ ageStore.age }}
      {{ ageStore.name }}
      {{ ageStore.arr }}
      {{ ageStore.gettersAge }}

      <!-- <button @click="ageStore.addAge">
        21312313232
      </button> -->

      <button @click="changeAge()">
        ++
      </button>

      <button @click="resAge()">
        +resAge
      </button>


      <!-- {{ counterStore.counter }}
      {{ counterStore.gettersCounter }}

      <button @click="counterStore.addCounter(300)">
        21312313232
      </button> -->

  </div>
</template>

<script setup lang="ts">

import { useAgeStore } from "@/stores/counter"

const ageStore = useAgeStore()
// const counterStore = useCounterStore()

const changeAge = ()=>{
  // 方式1
  // ageStore.age++;

  // 方式2 批量修改
  // ageStore.$patch({
  //   age:50,
  //   name:"Peter",
  //   arr:[...ageStore.arr,5]
  // })
  // 方式3 批量修改 $patch(函数) 推荐使用
  ageStore.$patch((state)=>{
    state.age = 20;
    state.name = '李四';
    state.arr.push(5);
  })

}

const resAge = ()=>{
  ageStore.$reset()
}
 
</script>

<style scoped>

</style>